<template>
	<view class="one" :data-theme="theme">
		<view class="header_one">
			<u-steps :current="num" :activeColor="bgColor">
				<u-steps-item :title="item.name" v-for="(item,index) in numList" :key="index">
				</u-steps-item>

			</u-steps>

		</view>
		<scroll-view scroll-y="true" class="scrollHeight">
			<!-- 法人信息 -->
			<view class="bian" style="margin: 20px 0;">
				<view class="title">法人信息</view>
				<view><text class="text-gray">依照行业规定，平台需校验营业执照法人身份信息</text></view>
				<u--form labelPosition="left" :model="merchantData" :rules="rules" ref="legalPersonForm"
					label-width="100px">

					<u-form-item label="证件类型" style="padding: 20px 10px 0;" prop="behalfCardTypeName" borderBottom
						@click="showType = true;">
						<u--input v-model="merchantData.behalfCardTypeName" disabled disabledColor="#ffffff"
							placeholder="请选择证件类型" ab border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<view class="shangc">
						<view class="sc-l">
							<view class="sc-l-img">
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="1" width="140" height="85">

									<image v-if="!cardFrontPhoto" src="../../../imgs/idFront.png" mode="heightFix"
										style="width: 140px;height: 85px;">
									</image>
									<image v-else :src="cardFrontPhoto" mode="heightFix"
										style="width: 140px;height: 85px;">
									</image>

								</u-upload>


							</view>
							<view>身份证正面</view>

						</view>
						<view class="sc-l">
							<view class="sc-l-img">
								<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
									multiple :maxCount="1" width="140" height="85">

									<image v-if="!cardBackPhoto" src="../../../imgs/idReverse.png" mode="heightFix"
										style="width: 140px;height: 85px;">
									</image>
									<image v-else :src="cardBackPhoto" mode="heightFix"
										style="width: 140px;height: 85px;">
									</image>
								</u-upload>

							</view>

							<view>身份证反面</view>

						</view>
					</view>
					<u-form-item label="姓名" prop="behalfName" borderBottom>
						<u--input v-model="merchantData.behalfName" disabledColor="#ffffff" placeholder="请输入姓名"
							border="none"></u--input>

					</u-form-item>
					<u-form-item label="证件号" prop="behalfCardNo" borderBottom>
						<u--input v-model="merchantData.behalfCardNo" disabledColor="#ffffff" type="tel" maxlength="18"
							placeholder="请输入证件号" border="none"></u--input>

					</u-form-item>
					<u-form-item label="预留手机号" prop="behalfCall" borderBottom>
						<u--input v-model="merchantData.behalfCall" type="tel" maxlength="11" disabledColor="#ffffff"
							placeholder="请输入预留手机号" border="none"></u--input>

					</u-form-item>


				</u--form>
				<view class="indate">
					<view class="header">身份证有效期</view>

					<view class="indateList">
						<view class="indateItem" :class='certificateIndex === 0?"selectStyle":""'
							@click="certificateClick(0,certificateArray[0])">
							<view class="itemLeft">{{certificateArray[0].name}}</view>
							<view class="itemRight">{{certificateArray[0].time}}</view>
						</view>

						<view class="indateItem" :class='certificateIndex === 1?"selectStyle":""'
							@click="certificateClick(1,certificateArray[1])">
							<view class="itemLeft">{{certificateArray[1].name}}</view>
							<uni-datetime-picker type="daterange" :disabled="merchantData.isApply"
								:start="formatDate(startDate)" :end="formatDate(endDate)" rangeSeparator="至"
								@change="certificateConfirm"
								v-model="behalfValidity">{{certificateArray[1].time}}</uni-datetime-picker>
						</view>
					</view>

				</view>
				<u-action-sheet :show="showType" :actions="legalCardTypeList" title="请选择证件类型" @close="showType = false"
					@select="certificateTypeSelect">
				</u-action-sheet>

			</view>
			<!-- 营业执照信息 -->
			<view class="bian">
				<view class="title"><span></span>营业执照<text class="text-gray">（请上传最新中国大陆营业执照正面照）</text></view>

				<u--form labelPosition="left" :model="merchantData" :rules="rules" ref="licenseForm"
					label-width="140px">

					<u-form-item borderBottom>
						<view class="yyzz">

							<view class="license">
								<u-upload style="" :fileList="fileList3" @afterRead="afterRead" @delete="deletePic"
									width="140" height="85" name="3" multiple :maxCount="1">
									<image v-if="!licenseImage" src="../../../imgs/license.png" mode="heightFix"
										style="width: 140px;height: 85px;">
									</image>
									<image v-else :src="licenseImage" mode="heightFix"
										style="width: 140px;height: 85px;">
									</image>
								</u-upload>

							</view>

							<view>营业执照</view>
						</view>



					</u-form-item>
					<u-form-item label="统一社会信用代码" prop="legalCardNum" borderBottom>
						<u--input v-model="merchantData.legalCardNum" disabledColor="#ffffff" placeholder="请输入统一社会信用代码"
							border="none"></u--input>

					</u-form-item>
					<u-form-item label="单位名称" prop="legalName" borderBottom>
						<u--input v-model="merchantData.legalName" disabledColor="#ffffff" placeholder="请输入单位名称"
							border="none"></u--input>

					</u-form-item>
					<u-form-item label="注册地址" prop="legalRegisterAddress" borderBottom>
						<u--input v-model="merchantData.legalRegisterAddress" disabledColor="#ffffff"
							placeholder="请输入注册地址" border="none"></u--input>

					</u-form-item>
				</u--form>
				<view class="indate">
					<view class="header">执照有效期</view>
					<!-- <view class="indateList" :class='licenseIndex === index?"selectStyle":""'
						v-for="(item, index) in licenseArray" :key="index" @click="licenseClick(index,item)">
						<view class="indateItem">
							<view class="itemLeft">{{item.name}}</view>
							<view class="itemRight">{{item.time}}</view>
						</view>

					</view> -->
					<view class="indateList">
						<view class="indateItem" :class='licenseIndex === 0?"selectStyle":""'
							@click="licenseClick(0,licenseArray[0])">
							<view class="itemLeft">{{licenseArray[0].name}}</view>
							<view class="itemRight">{{licenseArray[0].time}}</view>
						</view>

						<view class="indateItem" :class='licenseIndex === 1?"selectStyle":""'
							@click="licenseClick(1,licenseArray[1])">
							<view class="itemLeft">{{licenseArray[1].name}}</view>
							<uni-datetime-picker type="daterange" :start="formatDate(startDate)"
								:end="formatDate(endDate)" rangeSeparator="至" @change="licenseConfirm"
								v-model="legalValidity">{{licenseArray[1].time}}</uni-datetime-picker>
						</view>
					</view>

				</view>


			</view>
			<!-- 合作商信息 -->
			<view class="bian" style="margin: 20px  0;">
				<view class="title"><span></span>合作商信息</view>

				<u--form labelPosition="left" :model="merchantData" :rules="rules" ref="cooperationForm"
					label-width="100px">

					<u-form-item label="公司类型" prop="isLegalName" borderBottom @click="isLegalShow = true;">
						<u--input v-model="merchantData.isLegalName" disabled disabledColor="#ffffff"
							placeholder="请选择公司类型" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<u-form-item label="商户名称" prop="name" borderBottom>
						<u--input v-model="merchantData.name" disabledColor="#ffffff" placeholder="请输入名称"
							border="none"></u--input>

					</u-form-item><u-form-item label="商户姓名" prop="realName" borderBottom>
						<u--input v-model="merchantData.realName" disabledColor="#ffffff" placeholder="请输入姓名"
							border="none"></u--input>

					</u-form-item>
					<u-form-item label="商户分类" prop="categoryIdName" borderBottom @click="categoryIdNameShow = true;">
						<u--input v-model="merchantData.categoryIdName" disabledColor="#ffffff" placeholder="请选择商户分类"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<u-form-item label="商户类型" prop="typeIdName" borderBottom @click="typeIdNameShow = true;">
						<u--input v-model="merchantData.typeIdName" disabledColor="#ffffff" placeholder="请选择商户类型"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>


					<u-form-item label="简介" borderBottom>
						<u--input v-model="merchantData.keywords" disabledColor="#ffffff" placeholder="请输入简介"
							border="none"></u--input>

					</u-form-item>

				</u--form>
				<u-action-sheet :show="isLegalShow" :actions="isLegalList" title="请选择公司类型" @close="isLegalShow = false"
					@select="isLegalListSelect">
				</u-action-sheet>
				<u-action-sheet :show="categoryIdNameShow" :actions="merchantClassify" title="请选择商户分类"
					@close="categoryIdNameShow = false" @select="categoryIdNameSelect">
				</u-action-sheet>
				<u-action-sheet :show="typeIdNameShow" :actions="merchantType" title="请选择商户类型"
					@close="typeIdNameShow = false" @select="typeIdNameSelect">
				</u-action-sheet>
			</view>
			<!-- 身份证有效期 -->
			<!-- <u-calendar :show="identityCardShow" mode="range" closeOnClickOverlay @confirm="identityCardConfirm"
				@close="identityCardClose"></u-calendar> -->
		</scroll-view>
		<!-- <view class="btn flex flex-direction bottomStyle">
			<u-button class="cu-btn lg bg-blue" :color="bgColor" @click="next">下一步</u-button>
		</view> -->
		<view class="btn">
			<button class="cu-btn lg bg-blue bg_color"
				style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" :color="bgColor"
				@click="next">下一步</button>
		</view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	import {
		mapGetters
	} from "vuex";
	import {
		getMerTypeListApi,
		getMerCategoryListApi,
		applyEchoAPi
	} from '@/api/merchant.js';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				numList: [{
					name: '提交资质'
				}, {
					name: '选择入驻方式'
				}, {
					name: '等待审核'
				}, ],
				num: 0,
				// 正面上传图片列表
				fileList1: [],
				fileList2: [],
				fileList3: [],
				// 商户认证信息
				merchantData: {
					name: "", //商户名称不能超过50个字符
					realName: "", // 商户姓名不能为空
					handlingFee: '', //手续费不能为空 0-100
					categoryId: 0, //商户分类不能为空
					categoryIdName: '',
					keywords: '', //商户关键字
					typeId: 0, //商户类型不能为空
					typeIdName: '',


					qualificationPicture: '', //资质图片不能为空
					isLegal: '', //商户标识不能为空  户标识：1-机构、0-个人
					isLegalName: '',
					legalName: '', //机构名称不能为空
					legalCardNum: '', //统一社会信用代码不能为空
					legalRegisterAddress: '', //注册地址不能为空
					legalValidity: "", //有效期
					legalValidityType: '', // 有效期类型

					behalfName: '', //法人姓名不能为空
					behalfCardNo: '', //法人身份证号不能为空
					behalfCardType: '', //证件类型不能为空
					behalfCardTypeName: '',
					cardFrontPhoto: '', //法人身份证正面不能为空
					cardBackPhoto: '', //法人身份证正面不能为空
					behalfCall: '', // 预留手机号
					behalfValidity: '', //有效期不能为空
					behalfValidityType: "", //有效期类型不能为空

				},
				// 默认图片
				licenseImage: '', // 营业执照图片
				cardFrontPhoto: '', //法人身份证正面不能为空
				cardBackPhoto: '', //法人身份证正面不能为空
				merchantType: [],
				merchantClassify: [],
				// 校验
				rules: {
					// 合作商
					name: [{
						required: true,
						message: '请输入商户名称',
						trigger: ['blur', 'change'],

					}, {
						max: 50,
						message: '不能超过50个字符',
						trigger: ['blur', 'change'],
					}],
					realName: [{
						required: true,
						message: '请输入商户姓名',
						trigger: ['blur', 'change']
					}],
					categoryIdName: [{
						required: true,
						message: '请选择商户分类',
						trigger: ['blur', 'change']
					}],

					keywords: [{
						required: true,
						message: '请输入商户关键字',
						trigger: ['blur', 'change']
					}],
					typeIdName: [{
						required: true,
						message: '请选择商户类型',
						trigger: ['blur', 'change']
					}],
					isLegalName: [{
						required: true,
						message: '请选择商户标识',
						trigger: ['blur', 'change']
					}],


					legalName: [{
						required: true,
						message: '请输入机构名称',
						trigger: ['blur', 'change']
					}],
					legalCardNum: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: ['blur', 'change']
					}],
					legalRegisterAddress: [{
						required: true,
						message: '请输入注册地址',
						trigger: ['blur', 'change']
					}],


					// 法人信息
					behalfName: [{
						required: true,
						message: '请输入法人姓名',
						trigger: ['blur', 'change']
					}],
					behalfCardNo: [{
						required: true,
						message: '请输入法人身份证号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^\d{17}[\dXx]$/,
						message: '身份证号格式不正确',
						trigger: 'blur'
					}],

					behalfCardTypeName: [{
						required: true,
						message: '请选择证件类型',
						trigger: ['blur', 'change']
					}],

					behalfCall: [{
						required: true,

						message: '请输入预留手机号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^1[3456789]\d{9}$/,
						message: '手机号格式不正确',
						trigger: 'blur'
					}],

				},

				// 证件类型
				legalCardTypeList: [{
						name: '中国大陆居民身份证',
						type: '1',
					},

					{
						name: '其他',
						type: '2',
					},
				],
				// 证件有效期信息
				certificateArray: [{
						name: '长期有效',
						time: ""
					},
					{
						name: '固定有效期',
						time: "请选择证件有效期"
					}
				],
				// 证件有效期标识
				certificateIndex: undefined,
				// 执照有效期信息
				licenseArray: [{
						name: '长期有效',
						time: "执照上无经营期限则为长期有效"
					},
					{
						name: '固定有效期',
						time: "请选择营业执照截止日期"
					}
				],
				// 公司类型
				isLegalList: [{
						name: '机构',
						value: 1
					},
					{
						name: '个人',
						value: 0
					}
				],
				// 执照有效期标识
				licenseIndex: undefined,
				// 身份证有效期显示日历
				identityCardShow: false,


				// 证件类型显示
				showType: false,
				// 公司类型显示
				isLegalShow: false,
				// 商户分类显示
				categoryIdNameShow: false,
				// 商户类型显示
				typeIdNameShow: false,
				// 有效期时间的初始时间和结束时间
				startDate: new Date('1900-01-01'),
				endDate: new Date(),
				behalfValidity: [], // 身份证有效期时间组件的v-mode值
				legalValidity: [], // 执照有效期时间组件的v-mode值

			};
		},
		async onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});

			await this.getMerTypeList()
			await this.getMerCategoryList()
			await this.applyEcho()
			console.log("this.merchantData", this.merchantData)
			if (this.merchantData.checkStatus == 1) { // 处理中
				uni.navigateTo({
					url: '/pages/certification/three/three',
				});

			} else if (this.merchantData.checkStatus == 2) {
				uni.navigateTo({
					url: '/pages/login/login',
				}); // 审核成功

			} else if (this.merchantData.checkStatus == 3) { // 审核拒绝
				uni.showModal({
					title: '审核拒绝',
					content: `原因：${this.merchantData.reason},请您重新申请。`,
					success: (res) => {

					}
				})
			}
		},
		onShow() {
			if (this.merchantData.checkStatus == 1) { // 审核中

				uni.showModal({
					content: `审核中，我们尽快为您审核，请您耐心等待`,
					success: (res) => {
						uni.navigateTo({
							url: '/pages/certification/three/three',
						});
					}
				})
			} else if (this.merchantData.checkStatus == 2) { // 审核同意
				uni.navigateTo({
					url: '/pages/index/index',
				});
			} else if (this.merchantData.checkStatus == 3) { // 审核拒绝
				uni.showModal({
					title: '审核拒绝',
					content: `原因：${this.merchantData.reason},请您重新申请。`,
					success: (res) => {

					}
				})
			}
		},
		methods: {
			// 获取营业执照日历信息
			licenseConfirm(e) {

				this.merchantData.legalValidity = e[0] + '-' + e[e.length - 1]

				this.licenseArray[this.licenseIndex].time = e[0] + '-' + e[e.length - 1]
			},
			// 获取身份证日历信息
			certificateConfirm(e) {

				this.merchantData.behalfValidity = e[0] + '-' + e[e.length - 1]

				this.certificateArray[this.certificateIndex].time = e[0] + '-' + e[e.length - 1]
			},
			// 修改有效期时间
			formatDate(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month}-${day}`;
			},
			// 身份证日期
			identityCardClose() {
				this.identityCardShow = false
			},
			identityCardConfirm(e) {
				this.identityCardShow = false
			},
			// 商户类型
			typeIdNameSelect(e) {
				this.merchantData.typeIdName = e.name
				this.merchantData.typeId = e.id
				this.$refs.cooperationForm.validateField('typeIdName')
			},
			// 商户分类搜索
			categoryIdNameSelect(e) {
				this.merchantData.categoryIdName = e.name
				this.merchantData.categoryId = e.id
				this.merchantData.handlingFee = e.handlingFee;

				this.$refs.cooperationForm.validateField('categoryIdName')
			},
			// 公司类型搜索
			isLegalListSelect(e) {
				this.merchantData.isLegalName = e.name
				this.merchantData.isLegal = e.value
				this.$refs.cooperationForm.validateField('isLegalName')
			},
			// 请选择证件有效期
			certificateClick(index, item) {
				if (index == 0) {
					this.certificateArray[this.certificateIndex].time = "请选择证件有效期"
				}
				this.certificateIndex = index
				this.merchantData.behalfValidityType = index + 1

			},
			// 执照有效期选择
			licenseClick(index, item) {
				if (index == 0) {
					this.licenseArray[this.licenseIndex].time = "请选择营业执照截止日期"
				}
				this.licenseIndex = index
				this.merchantData.legalValidityType = index + 1
			},
			// 证件类型选择
			certificateTypeSelect(e) {
				this.merchantData.behalfCardTypeName = e.name
				this.merchantData.behalfCardType = e.type
				this.$refs.legalPersonForm.validateField('behalfCardTypeName')
			},

			// 下一步
			next() {


				this.$refs.legalPersonForm.validate().then(res => {
					this.$refs.licenseForm.validate().then(res => {
						this.$refs.cooperationForm.validate().then(res => {
							if (!this.cardFrontPhoto) return this.$util.Tips({
								title: '请上传法人身份证正面'
							});
							if (!this.cardBackPhoto) return this.$util.Tips({
								title: '请上传法人身份证反面'
							});
							if (!this.merchantData.behalfValidity) return this.$util.Tips({
								title: '身份证有效期不能为空'
							});
							if (!this.merchantData.behalfValidityType) return this.$util.Tips({
								title: '身份证有效期类型不能为空'
							});
							if (!this.licenseImage) return this.$util.Tips({
								title: '请上传营业执照'
							});
							if (!(this.merchantData.legalValidity && this.merchantData
									.legalValidity)) return this.$util
								.Tips({
									title: '请您选择营业执照有效期'
								});
							let regex = /^(?:https?:\/\/)?[^/]+\/([^/]+)/;
							this.merchantData.qualificationPicture = this.licenseImage.replace(
								regex, "$1")
							this.merchantData.cardFrontPhoto = this.cardFrontPhoto.replace(
								regex, "$1")
							this.merchantData.cardBackPhoto = this.cardBackPhoto.replace(
								regex, "$1")
							uni.navigateTo({
								url: `/pages/certification/two/two?merchantData=${JSON.stringify(this.merchantData)}`,
							})
						}).catch(error => {
							// 处理异步操作失败的情况
							uni.$u.toast('请完善合作商信息！');
						});
					}).catch(error => {
						// 处理异步操作失败的情况
						uni.$u.toast('请完善营业执照！');
					});
				}).catch(error => {
					// 处理异步操作失败的情况
					uni.$u.toast('请完善法人信息！');
				});

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					if (result == null) {
						uni.showToast({
							title: "上传失败",
							icon: "none",
						})
						this.deletePic(event.index, 1);
						break;
					}
					let newStatus = {
						status: 'success',
						message: '上传成功',
						url: result,
					}

					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, newStatus))
					if (event.name == 1) {
						this.cardFrontPhoto = this.fileList1[0].url // 身份证正面
					}
					if (event.name == 2) {
						this.cardBackPhoto = this.fileList2[0].url // 身份证反面
					}
					if (event.name == 3) {
						this.licenseImage = this.fileList3[0].url // 身份证反面
					}
					fileListLen++
					this.fileList1 = []
					this.fileList2 = []
					this.fileList3 = []
				}
			},
			uploadFilePromise(filePath) {
				return this.$util.uploadFilePromise(filePath, {
					url: 'upload/image',
					name: "multipart", //固定 multipart
					model: "product", //模块 用户user,商品product,微信wechat,news文章
					pid: 1, //分类ID 0编辑器,1商品图片,2拼团图片,3砍价图片,4秒杀图片,5文章图片,6组合数据图,7前台用户,8微信系列
					count: 1
				});
			},
			// 获取全部商户类型列表
			async getMerTypeList() {
				try {
					let result = await getMerTypeListApi()
					if (result.code == 200) {
						this.merchantType = result.data
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},
			// 获取全部商户分类列表

			async getMerCategoryList() {
				try {
					let result = await getMerCategoryListApi()
					if (result.code == 200) {
						this.merchantClassify = result.data
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},


			// 商户入驻申请回显数据
			async applyEcho() {
				try {
					let result = await applyEchoAPi()
					let data = result.data

					if (data != null) {
						this.merchantData = data
						// 重新获取图片的
						// 回显照片
						this.cardFrontPhoto = this.merchantData.cardFrontPhoto // 身份证正面
						this.cardBackPhoto = this.merchantData.cardBackPhoto // 身份证反面
						this.licenseImage = this.merchantData.qualificationPicture // 回显营业执照
						// 判断证件以及执照有效期显示的
						if (data.behalfValidityType == 1) { //身份证回显有效期
							this.certificateIndex = 0

						}
						if (data.behalfValidityType == 2) { //身份证回显有效期
							this.certificateIndex = 1
							this.certificateArray[this.certificateIndex].time = data.behalfValidity

						}
						if (data.legalValidityType == 1) { // 执照回显有效期
							this.licenseIndex = 0

						}
						if (data.legalValidityType == 2) { // 执照回显有效期
							this.licenseIndex = 1
							this.licenseArray[this.licenseIndex].time = data.legalValidity


						}
						// 商户分类
						for (let i = 0; i < this.merchantClassify.length; i++) {
							if (this.merchantClassify[i].id == data.categoryId) {
								this.merchantData.categoryIdName = this.merchantClassify[i].name
								break;
							}
						}
						// 商户类型
						for (let i = 0; i < this.merchantType.length; i++) {
							if (this.merchantType[i].id == data.typeId) {
								this.merchantData.typeIdName = this.merchantType[i].name
								break;
							}
						}
						// 公司类型
						for (let i = 0; i < this.isLegalList.length; i++) {
							if (this.isLegalList[i].value == data.isLegal) {
								this.merchantData.isLegalName = this.isLegalList[i].name
								break;
							}
						}
						// 证件类型
						for (let i = 0; i < this.legalCardTypeList.length; i++) {
							if (this.legalCardTypeList[i].type == data.behalfCardType) {
								this.merchantData.behalfCardTypeName = this.legalCardTypeList[i].name
								break;
							}
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},



		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-steps-item__wrapper {
		background-color: #f5f5f5;
	}

	.header_one {
		margin-top: 20px;
	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: center;
	}

	page {
		height: 100%;
	}

	.text_color {
		@include main_color(theme)
	}

	.bottomStyle {
		position: sticky !important;
		;
		bottom: 0px !important;
		left: 0px !important;
	}

	.selectStyle {
		@include main_color(theme) @include border_color(theme);
		border: 1rpx solid;
	}

	.bg_color {
		@include main_bg_color(theme);

	}


	.scrollHeight {
		flex: 1;
		min-height: 200px;
	}

	.one {
		display: flex;
		flex-direction: column;
		height: 100%;

		.BH5 {
			background-color: #F3F5F4;
			height: 4px;
		}

		.title {
			padding: 5px 0 15px;
			font-weight: 600;

			span {
				color: #E74949;
				padding-right: 5px;
			}
		}

		.position {
			display: flex;
			justify-content: space-between;
			padding: 5px 0 0;

			input {
				text-align: right;
			}
		}

		.bian {
			border-bottom: 1px solid #F7F7F7;
			background-color: white;
			padding: 10px 10px 20px;
			border-radius: 10px;

			.indate {
				display: flex;
				justify-content: space-around;
				padding: 20px 0;

				.header {
					width: 100px;
				}

				.indateList {
					display: flex;

					.indateItem {
						background-color: #eee;
						padding: 10px;
						line-height: 20px;
						width: 120px;
						padding-left: 10px;
						border-radius: 10px;
						margin-right: 10px;
					}
				}



			}
		}

		.shangc {
			display: flex;
			justify-content: center;
			padding: 20px 0;

			.sc-l {
				width: 48%;
				// text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #A1A1A1;

				.sc-l-img {
					padding: 10px 0;

					img {
						width: 140px;
						height: 85px;
					}
				}
			}
		}

		.yyzz {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 15px;


			img {
				width: 160px;
				height: 100px;
			}
		}

		.H50 {
			height: 50px;
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 10px;
			width: 100%;
			background-color: #fff;
			z-index: 9;
		}
	}
</style>